<template>
	<view class="index">
		<music-head title='网易云音乐' :icon='false'/>
		<view class="container">
			<scroll-view class="scroll" scroll-y="true">
				<view class="index-search" @tap="handleToSearch">
					<text class="iconfont icon-sousuo"></text>
					<input type="text" placeholder="搜索">
				</view>
				<view v-if='isLoading'>
					<m-for-skeleton
						:avatarSize="200"
						:row="3"
						:loading="isLoading"
						isarc="square"
						:titleStyle="{}"
						:title='false'
						v-for="(item,key) in 4"
						:key="key"
					>
					</m-for-skeleton>
				</view>
				
				<view class="list" v-else>
					<view class="list-item" 
						v-for="(item,index) in topList" 
						:key='index'
						@tap="handleToList(item.listId)"
					>
						<view class="item-img">
							<image :src='item.coverImgUrl'></image>
							<text>{{item.upateFrequency}}</text>
						</view>
						<view class="item-text ellipsis">
							<view v-for="(i,v) in item.tracks" :key='v'>{{v + 1}}.{{i.first}} - {{i.second}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import {topList} from '@/common/api.js';
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	import musicHead from '@/components/musicHead/index.vue';
	export default {
		data() {
			return {
				title: 'Hello',
				topList:[],
				isLoading: true
			}
		},
		onLoad() {
			setTimeout(() => {
				this.getTopList();
			},1000)
		},
		methods: {
			async getTopList() {
				let res = await topList();
				// console.log(res);
				if(res.length){
					this.topList = res;
					this.isLoading = false;
				}
			},
			handleToList(listId) {
				uni.navigateTo({
					// url: '/pages/list/index?listId='+listId
					url: '/pages/list/index?listId=19723756'
				})
			},
			handleToSearch(){
				uni.navigateTo({
					// url: '/pages/list/index?listId='+listId
					url: '/pages/search/index'
				})
			}
		},
		components:{
			musicHead,
			mForSkeleton
		}
	}
</script>

<style scoped>
	.index {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.index-search{
		display: flex;
		align-items: center;
		height: 70upx;
		margin: 70upx 30upx 30upx 30upx; 
		background-color: #f7f7f7;
		border-radius: 50upx;}
	.index-search text{font-size: 26upx;margin-right: 26upx;margin-left: 28upx;}
	.index-search input{font-size: 28upx;flex: 1;}
	.list{margin:0 30upx;}
	.list-item{display: flex;margin-bottom: 34upx;}
	.item-img{width: 212upx;height: 212upx;position: relative;border-radius: 30upx;overflow: hidden;margin-right: 22upx;}
	.item-img image{width: 100%;height: 100%;}
	.item-img text{position: absolute;left: 12upx;bottom: 16upx;color: #fff;font-size: 20upx;}
	.item-text{flex: 1; font-size: 24upx;line-height: 66upx;}
	/*显示省略号*/
	.ellipsis{
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
